<template>
    <page-container>
        <view slot='center' :data-theme="themeStyle">
            <view scroll-y="true" class="goods-detail" :class="isIphoneX ? 'active' : ''">
                <view class="goods-container">
                    <!-- 商品媒体信息 -->
                    <view class="goods-media">
                        <!-- 商品图片 -->
                        <!-- #ifdef H5 -->
                        <cover-view class="share">
                            <view class="share_left">
                                <text class="iconfont iconback_light" @click="$util.goBack()"></text>
                            </view>
                            <view class="share_right" v-if="preview == 0">
                                <text class="follow iconfont iconfenxiang2" @click="openSharePopup()"></text>
                                <text class="iconfont" @click="editCollection()" :class="whetherCollection == 1 ? 'iconlikefill color-base-text' : 'iconguanzhu1'"></text>
                            </view>
                        </cover-view>
                        <!-- #endif -->
                        <!-- <cover-view class="share" style="top: 15px;width: calc(100% - 31px);display: flex;justify-content: space-between;align-items: center; padding: 5px 15px;">
						<view class="follow-and-share" v-if="preview == 0"
						style="right: 5px !important;top: 20% !important;position: absolute;top: 20px;right: 10px;z-index: 9999;">
							<text class="follow iconfont iconfenxiang2" @click="openSharePopup()"></text>
							<text class="share iconfont" @click="editCollection()"
							:class="whetherCollection == 1 ? 'iconlikefill color-base-text' : 'iconguanzhu1'"></text>
							<text class="fenxiao color-base-text" v-if="showFenxiao != 0 && levelInfo.words_account && levelInfo.commission_money > 0">
								返￥{{ levelInfo.commission_money }}
							</text>
						</view>
					</cover-view> -->
                        <view class="goods-img" :class="{ show: switchMedia == 'img' }">
                            <swiper class="swiper" @change="swiperChange" :interval="swiperInterval" :autoplay="swiperAutoplay">
                                <swiper-item v-for="(item, index) in goodsSkuDetail.sku_images" :key="index" :item-id="'goods_id_' + index">
                                    <view class="item" @click="previewMedia(index)">
                                        <image :src="$util.img(item, { size: 'big' })" @error="swiperImgError(index)" mode="aspectFit" />
                                    </view>
                                </swiper-item>
                            </swiper>
                            <view class="img-indicator-dots">
                                <text>{{ swiperCurrent }}</text>
                                <text v-if="goodsSkuDetail.sku_images">/{{ goodsSkuDetail.sku_images.length }}</text>
                            </view>
                        </view>
                        <!-- 商品视频 -->
                        <view class="goods-video" :class="{ show: switchMedia == 'video' }">
                            <!-- #ifndef APP-PLUS -->
                            <video :src="$util.img(goodsSkuDetail.video_url)" :poster="$util.img(goodsSkuDetail.sku_image, { size: 'big' })" objectFit="cover"></video>
                            <!-- #endif -->
                            <!-- #ifdef APP-PLUS -->
                            <view class="video-img" @click="openVideo($util.img(goodsSkuDetail.video_url), $util.img(goodsSkuDetail.cover))">
                                <image :src="$util.img(goodsSkuDetail.sku_image, { size: 'big' })" mode=""></image>
                                <view class="video-open">
                                    <view class="iconfont iconarrow-"></view>
                                </view>
                            </view>
                            <!-- #endif -->
                        </view>

                        <!-- 切换视频、图片 -->
                        <view class="media-mode" v-if="goodsSkuDetail.video_url != ''">
                            <text :class="{ 'color-base-bg': switchMedia == 'video' }" @click="switchMedia = 'video'">{{ $lang('video') }}</text>
                            <text :class="{ 'color-base-bg': switchMedia == 'img' }" @click="switchMedia = 'img'">{{ $lang('image') }}</text>
                        </view>
                    </view>

                    <!-- 企业购价格栏 -->

                    <view class="business" v-if="goodsSkuDetail.is_consume_discount==1&&userInfo.member_level==2">
                        <view class="business-position">
                            <view class="business-label">￥</view>
                            <view class="business-price">
                                <view class="prices-integer">{{business_price.integer}}</view>
                                <view class="prices-decimal">.{{business_price.decimal}}</view>
                            </view>
                            <view class="business-original">￥{{goodsSkuDetail.market_price}}</view>
                        </view>
                    </view>

                    <!-- 播放视频 -->
                    <view @touchmove.prevent.stop class="videoPopup-box">
                        <uni-popup ref="videoPopup" type="center">
                            <view class="pop-video">
                                <video :src="$util.img(goodsSkuDetail.video_url)" :poster="$util.img(goodsSkuDetail.sku_image, { size: 'big' })" objectFit="cover"></video>
                            </view>
                        </uni-popup>
                    </view>

                    <!-- 限时折扣 -->
                    <view v-if="showDiscount && goodsSkuDetail.discountTimeMachine" class="goods-promotion" :style="{ backgroundImage: 'url(' + $util.img('upload/uniapp/goods/detail_promotion_left_bg.png') + ')' }">
                        <view class="price-info">
                            <view class="img-wrap">
                                <image :src="$util.img('upload/uniapp/goods/detail_discount_tag.png')" mode="aspectFit">
                                </image>
                            </view>
                            <view class="sale-num">已售{{ goodsSkuDetail.sale_num }} {{ goodsSkuDetail.unit }}</view>
                        </view>
                        <view class="countdown" :style="{ backgroundImage: 'url(' + $util.img('upload/uniapp/goods/detail_promotion_right_bg.png') + ')' }">
                            <view class="txt">距结束仅剩</view>
                            <view class="clockrun">
                                <uni-count-down :day="goodsSkuDetail.discountTimeMachine.d" :hour="goodsSkuDetail.discountTimeMachine.h" :minute="goodsSkuDetail.discountTimeMachine.i" :second="goodsSkuDetail.discountTimeMachine.s" color="#fff" splitorColor="#FF4644" backgroundColor="#FF4644" />
                            </view>
                        </view>
                    </view>

                    <!-- 商品标题 -->
                    <view class="group-wrap padding-top">
                        <view class="" style="display: flex;justify-content: start;position: relative;">
                            <!-- 判断是否是会员，以及商品存在会员价 -->
                            <view class="goods-module-wrap" v-if="goodsSkuDetail.is_consume_discount == 0" style="display: flex;align-items: flex-end;">
                                <!-- 会员价 -->
                                <template>
                                    <block v-if="goodsSkuDetail.member_price > 0">
                                        <view class="member-name" style="display: inline-block;margin-left: 5px;height: 20px;">
                                            <!-- 会员价 -->
                                            <image :src="$util.img('upload/uniapp/index/VIP.png')" mode="aspectFit" style="width: 40px;height: 20px;">
                                            </image>
                                        </view>
                                    </block>
                                </template>
                            </view>
                            <!-- 分享和关注 -->
                            <!-- #ifdef MP-WEIXIN -->
                            <view class="follow-and-share" @touchmove.prevent.stop>
                                <text class="follow iconfont iconfenxiang2" @click="openSharePopup()"></text>
                                <text class="iconfont" @click="editCollection()" :class="whetherCollection == 1 ? 'iconlikefill color-base-text' : 'iconguanzhu1'"></text>
                            </view>
                            <!-- #endif -->

                            <view v-if="goodsSkuDetail.is_consume_discount==1&&userInfo.member_level==2"></view>
                            <view v-else>
                                <!-- 折扣价 -->
                                <text>
                                    <text class="price-company">{{ $lang('common.currencySymbol') }}</text>
                                    <text class="price-integer">
										<text class="integer_integer">{{ordinary_price.integer}}</text>
										<text class="integer_decimal">.{{ordinary_price.decimal}}</text>
									</text>
                                    <!-- 	<text class="price-integer">{{sku_price.integer}}</text><text
									class="price-decimal">.{{sku_price.decimal}}</text> -->
                                </text>
                            </view>
                        </view>
                        <view class="goods-title">{{goodsSkuDetail.goods_name}}</view>
						<view class="goods_label" v-if="goodsSkuDetail.introduction">{{goodsSkuDetail.introduction}}</view>
                        <view class="label_list">基地优选，售后无忧</view>
                    </view>

                    <!-- 当前商品参与的营销活动入口 -->
                    <view class="group-wrap">
                        <ns-goods-promotion ref="goodsPromotion" promotion="discount"></ns-goods-promotion>
                    </view>

                    <view class="group-wrap">
                        <ns-fenxiao-goods-detail :skuId="skuId" ref="fenxiaoPopup"></ns-fenxiao-goods-detail>
                    </view>

                    <view class="newdetail margin-bottom">
                        <view class="item coupon" v-if="preview == 0 && couponList.length" @click="openCouponPopup()">
                            <view class="option-tit">优惠</view>
                            <view class="coupon-list">
                                <view class="discount-box" v-for="(item, index) in couponList" :key="index">
                                    <view class="box-text" v-if="item.money > 0">
                                        满{{ $util.numberFixed(item.at_least) }}减{{ $util.numberFixed(item.money) }}</view>
                                    <view class="box-text" v-if="item.discount > 0">
                                        满{{ $util.numberFixed(item.at_least) }}享{{ $util.numberFixed(item.discount, 1) }}折
                                    </view>
                                </view>
                            </view>
                            <text class="collect-text">领券</text>
                            <image class="red-right" :src="$util.imgPath('arrow-redright.png')"></image>
                            <!-- <view class="img-wrap"><image :src="$util.img('upload/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
                        </view>
                    </view>

                    <view class="newdetail margin-bottom">
                        <!-- 已选规格 -->
                        <view class="item selected-sku-spec" v-if="goodsSkuDetail.sku_spec_format" @click="joinCart">
                            <view class="option-tit">选择</view>
                            <view class="box">
                                <text class="item-text" v-for="(item, index) in goodsSkuDetail.sku_spec_format" :key="index">{{ item.spec_name }}/{{ item.spec_value_name }}</text>
                            </view>
                            <image class="more_btn" :src="$util.imgPath('arrow-right.png')"></image>
                            <!-- <view class="img-wrap"><image :src="$util.img('upload/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
                        </view>
                        <view class="item free" v-if="manjian.rule_json !== null && addonIsExit.manjian" @click="openManjianPopup()">
                            <view class="option-tit">促销</view>
                            <text class="free-tip color-base-text color-base-border">满减</text>
                            <text class="font-size-base value">{{ manjian.manjian_name }}</text>
                            <image class="more_btn" :src="$util.imgPath('arrow-right.png')"></image>
                            <!-- <view class="img-wrap"><image :src="$util.img('upload/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
                        </view>
                        <!-- 是否包邮 -->
                        <view class="item goods-attribute" v-if="goodsSkuDetail.goods_attr_format && goodsSkuDetail.goods_attr_format.length > 0">
                            <view class="option-tit">运费</view>
                            <view class="list-wrap">
                                <block v-if="Development && goodsSkuDetail.is_virtual != 1">
                                    <text v-if="goodsSkuDetail.is_free_shipping">快递 包邮</text>
                                    <text v-else>快递 买家承担</text>
                                </block>
                            </view>
                            <!-- <view class="img-wrap"><image :src="$util.img('upload/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
                        </view>

                        <view class="item goods-attribute" @click="openAttributePopup()" v-if="goodsSkuDetail.goods_attr_format && goodsSkuDetail.goods_attr_format.length > 0">
                            <view class="option-tit">参数</view>
                            <view class="list-wrap">
                                <view class="item-wrap" v-for="(item, index) in goodsSkuDetail.goods_attr_format" :key="index" v-if="index < 2">
                                    <text>{{ item.attr_name }}:{{ item.attr_value_name }}</text>
                                </view>
                            </view>
                            <image class="more_btn" :src="$util.imgPath('arrow-right.png')"></image>
                            <!-- <view class="img-wrap"><image :src="$util.img('upload/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
                        </view>
                        <view class="item service" @click="openMerchantsServicePopup()" v-if="goodsSkuDetail.goods_service.length">
                            <view class="option-tit">服务</view>
                            <view class="list-wrap">
                                <view class="item-wrap" v-for="(item, index) in goodsSkuDetail.goods_service" :key="index" v-if="index < 3">
                                    <text class="iconfont icondui color-base-text"></text>
                                    <text>{{ item.service_name }}</text>
                                </view>
                            </view>
                            <image class="more_btn" :src="$util.imgPath('arrow-right.png')"></image>
                            <!-- <view class="img-wrap"><image :src="$util.img('upload/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
                        </view>
                    </view>

                    <!-- 商品参数 -->
                    <view @touchmove.prevent.stop>
                        <uni-popup ref="attributePopup" type="bottom">
                            <view class="goods-attribute-popup-layer popup-layer">
                                <view class="head-wrap" @click="closeAttributePopup()">
                                    <text>商品参数</text>
                                    <text class="iconfont iconclose"></text>
                                </view>
                                <scroll-view scroll-y class="goods-attribute-body">
                                    <view class="item" v-for="(item, index) in goodsSkuDetail.goods_attr_format" :key="index">
                                        <text class="attr-name">{{ item.attr_name }}</text>
                                        <text class="value-name">{{ item.attr_value_name }}</text>
                                    </view>
                                </scroll-view>
                                <view class="button-box"><button type="primary" @click="closeAttributePopup()">确定</button>
                                </view>
                            </view>
                        </uni-popup>
                    </view>

                    <template v-if="preview == 0">
                        <!-- 优惠券 -->
                        <view @touchmove.prevent.stop v-if="couponList.length">
                            <uni-popup ref="couponPopup" type="bottom">
                                <view class="goods-coupon-popup-layer popup-layer">
                                    <view class="head-wrap" @click="closeCouponPopup()">
                                        <text>优惠券</text>
                                        <text class="iconfont iconclose"></text>
                                    </view>
                                    <scroll-view class="coupon-body" scroll-y>
                                        <view class="coupon-item ns-gradient-diy-goods-list" :class="{ disabled: item.is_lingqu != undefined }" v-for="(item, index) in couponList" :key="index" :data-theme="themeStyle">
                                            <view class="coupon-info">
                                                <view class="info-wrap" :style="{
													backgroundImage:
														'url(' +
														(item.is_lingqu != undefined
															? $util.img('/upload/uniapp/coupon/bg_lingqu_gary.png')
															: $util.img('/upload/uniapp/coupon/bg_lingqu.png')) +
														')'
												}">
                                                    <view class="coupon-money">
                                                        <template v-if="item.type == 'reward'">
                                                            <text class="unit">{{ $lang('common.currencySymbol') }}</text>
                                                            <text class="money">{{ parseFloat(item.money) }}</text>
                                                        </template>
                                                        <template v-else-if="item.type == 'discount'">
                                                            <text class="money">{{ parseFloat(item.discount) }}</text>
                                                            <text class="unit">折</text>
                                                        </template>
                                                        <view class="at-least">
                                                            <template v-if="item.at_least > 0">
                                                                满{{ item.at_least }}可用
                                                            </template>
                                                            <template v-else>
                                                                无门槛
                                                            </template>
                                                        </view>
                                                    </view>
                                                </view>
                                                <view class="desc-wrap">
                                                    <view class="coupon-name">{{ item.coupon_name }}</view>
                                                    <view v-if="item.type == 'discount' && item.discount_limit > 0" class="limit">最多可抵￥{{ item.discount_limit }}</view>
                                                    <view class="time font-size-goods-tag" v-if="item.validity_type == 0">
                                                        有效期：{{ $util.timeStampTurnTime(item.end_time) }}</view>
                                                    <view class="time font-size-goods-tag" v-else>
                                                        领取之日起{{ item.fixed_term }}天内有效</view>
                                                </view>

                                                <button type="primary" v-if="item.is_lingqu != undefined" @click="receiveCoupon(item, index)" disabled>已领取</button>
                                                <button type="primary" v-else @click="receiveCoupon(item, index)">领取</button>
                                            </view>
                                        </view>
                                    </scroll-view>
                                    <view class="button-box"><button type="primary" @click="closeCouponPopup()">确定</button>
                                    </view>
                                </view>
                            </uni-popup>
                        </view>

                        <!-- 促销 -->
                        <view @touchmove.prevent.stop v-if="addonIsExit.manjian">
                            <uni-popup ref="manjianPopup" type="bottom">
                                <view class="manjian-popup-layer popup-layer">
                                    <view class="head-wrap" @click="closeManjianPopup()">
                                        <text>促销</text>
                                        <text class="iconfont iconclose"></text>
                                    </view>
                                    <scroll-view scroll-y class="manjian-body">
                                        <view class="item" v-if="manjian.manjian != undefined">
                                            <text class="free-tip color-base-text color-base-border">满减</text>
                                            <text class="font-size-base">{{ manjian.manjian }}</text>
                                        </view>
                                        <view class="item" v-if="manjian.mansong != undefined">
                                            <text class="free-tip color-base-text color-base-border">满送</text>
                                            <text class="font-size-base">{{ manjian.mansong }}</text>
                                        </view>
                                        <view class="item" v-if="manjian.free_shipping != undefined">
                                            <text class="free-tip color-base-text color-base-border">包邮</text>
                                            <text class="font-size-base">{{ manjian.free_shipping }}</text>
                                        </view>
                                        <view class="item" v-if="manjian.present != undefined">
                                            <text class="free-tip color-base-text color-base-border">赠品</text>
                                            <text class="font-size-base">有赠品</text>
                                        </view>
                                    </scroll-view>
                                    <view class="button-box"><button type="primary" @click="closeManjianPopup()">确定</button>
                                    </view>
                                </view>
                            </uni-popup>
                        </view>

                        <!-- 商品服务 -->
                        <view @touchmove.prevent.stop>
                            <uni-popup ref="merchantsServicePopup" type="bottom">
                                <view class="goods-merchants-service-popup-layer popup-layer">
                                    <view class="head-wrap" @click="closeMerchantsServicePopup()">
                                        <text>{{ $lang('service') }}</text>
                                        <text class="iconfont iconclose"></text>
                                    </view>
                                    <scroll-view scroll-y>
                                        <view class="item" :class="{ 'empty-desc': !item.desc }" v-for="(item, index) in goodsSkuDetail.goods_service" :key="index">
                                            <view class="iconfont icondui color-base-text"></view>
                                            <view class="info-wrap">
                                                <text class="title">{{ item.service_name }}</text>
                                                <text class="describe" v-if="item.desc">{{ item.desc }}</text>
                                            </view>
                                        </view>
                                    </scroll-view>
                                    <view class="button-box"><button type="primary" @click="closeMerchantsServicePopup()">确定</button></view>
                                </view>
                            </uni-popup>
                        </view>
                    </template>

                    <!-- 组合套餐 -->
                    <view v-if="preview == 0 && bundling.length && bundling[0].bl_name && addonIsExit.bundling">
                        <view class="group-wrap" @click="openBundlingPopup()">
                            <view class="goods-cell" @click="openBundlingPopup()">
                                <view class="box">
                                    <text class="tit">组合套餐</text>
                                    <text>{{ bundling[0].bl_name }}</text>
                                </view>
                                <text class="iconfont iconright"></text>
                                <!-- <view class="more-img-wrap"><image :src="$util.img('upload/uniapp/goods/detail_more.png')" mode="aspectFit" /></view> -->
                            </view>
                            <scroll-view class="combo-goods-wrap color-tip" scroll-x="true">
                                <view class="goods-wrap">
                                    <view class="goods-item" @click="toGoodsDetail(skuId)">
                                        <view class="combo-img">
                                            <image :src="$util.img(goodsSkuDetail.sku_image, { size: 'mid' })" @error="imgError()" />
                                            <view class="price-wrap">
                                                <text class="unit">{{ $lang('common.currencySymbol') }}</text>
                                                <text class="price">{{ goodsSkuDetail.price }}</text>
                                            </view>
                                        </view>
                                        <text class="name">{{ goodsSkuDetail.goods_name }}</text>
                                    </view>
                                    <block v-for="(item, index) in bundling[0].bundling_goods" :key="index">
                                        <template v-if="index < 3">
                                            <view class="goods-item" @click="toGoodsDetail(item.sku_id)">
                                                <view class="combo-img">
                                                    <image :src="$util.img(item.sku_image, { size: 'mid' })" @error="bundlingImgError(0, index)" />
                                                    <view class="price-wrap">
                                                        <text class="unit">{{ $lang('common.currencySymbol') }}</text>
                                                        <text class="price">{{ item.price }}</text>
                                                    </view>
                                                </view>
                                                <text class="name">{{ item.sku_name }}</text>
                                            </view>
                                        </template>
                                    </block>
                                </view>
                            </scroll-view>
                        </view>

                        <view @touchmove.prevent.stop>
                            <uni-popup ref="bundlingPopup" type="bottom">
                                <view class="bundling-popup-layer popup-layer">
                                    <view class="head-wrap" @click="closeBundlingPopup()">
                                        <text>组合套餐</text>
                                        <text class="iconfont iconclose"></text>
                                    </view>
                                    <scroll-view scroll-y class="bundling-body">
                                        <view class="bundling-view">
                                            <block v-for="(item, index) in bundling" :key="index">
                                                <view class="bundling-item">
                                                    <view class="title" @click="toComoDetail(item.bl_id)">
                                                        <text>{{ item.bl_name }}</text>
                                                        <text class="iconfont iconright"></text>
                                                    </view>
                                                    <scroll-view scroll-x>
                                                        <view class="goods-wrap">
                                                            <view class="goods-item" @click="toGoodsDetail(skuId)">
                                                                <view class="combo-img">
                                                                    <image :src="$util.img(goodsSkuDetail.sku_image, { size: 'mid' })" @error="imgError()" />
                                                                    <view class="price-wrap">
                                                                        <text class="unit">{{ $lang('common.currencySymbol') }}</text>
                                                                        <text class="price">{{ goodsSkuDetail.price }}</text>
                                                                    </view>
                                                                </view>
                                                                <text class="name">{{ goodsSkuDetail.goods_name }}</text>
                                                            </view>
                                                            <block v-for="(goods, goods_index) in item.bundling_goods" :key="goods_index">
                                                                <template v-if="goods_index < 3">
                                                                    <view class="goods-item" @click="toGoodsDetail(goods.sku_id)">
                                                                        <view class="combo-img">
                                                                            <image :src="$util.img(goods.sku_image, { size: 'mid' })" @error="bundlingImgError(index, goods_index)" />
                                                                            <view class="price-wrap">
                                                                                <text class="unit">{{ $lang('common.currencySymbol') }}</text>
                                                                                <text class="price">{{ goods.price }}</text>
                                                                            </view>
                                                                        </view>
                                                                        <text class="name">{{ goods.sku_name }}</text>
                                                                    </view>
                                                                </template>
                                                            </block>
                                                        </view>
                                                    </scroll-view>
                                                    <view class="bundling-price-wrap">
                                                        <text class="label">套餐价</text>
                                                        <text class="unit color-base-text">{{ $lang('common.currencySymbol') }}</text>
                                                        <text class="price color-base-text">{{ item.bl_price }}</text>
                                                        <button type="primary" size="mini" @click="toComoDetail(item.bl_id)">立即购买</button>
                                                    </view>
                                                </view>
                                            </block>
                                        </view>
                                    </scroll-view>
                                </view>
                            </uni-popup>
                        </view>
                    </view>

                    <!-- 商品评价 -->
                    <view class="group-wrap" v-if="preview == 0 && evaluateConfig.evaluate_show == 1&&goodsEvaluate.length>0">
                        <view class="comment-label" @click="toEvaluateDetail(goodsSkuDetail.goods_id)">
                            <view class="option-tit">商品评价({{goodsEvaluate.length}})</view>
                            <view class="label-right">
                                <view class="right-proportion">全部评论</view>
                                <image class="more_btn" :src="$util.imgPath('arrow-right.png')"></image>
                            </view>
                        </view>
                        <scroll-view class="comment-scroll" scroll-x="true">
                            <view class="comment-item" v-for="(item,index) in goodsEvaluate" :key="index">
                                <view class="item-user">
                                    <view class="user-head">
                                        <image :src="item.member_headimg"></image>
                                    </view>
                                    <view class="user-name">{{item.member_name}}</view>
                                </view>
                                <view class="item-detail">
                                    {{item.content}}
                                </view>
                                <view class="item-imglist">
                                    <view class="list-img" v-for="(img,inx) in item.images" :key="inx">
                                        <image :src="img"></image>
                                    </view>
                                </view>
                            </view>

                        </scroll-view>
                    </view>

                    <!-- 详情 -->

                    <!-- <view class="detail-tab">
						<view class="tab-item" :class="detailTab == 0 ? 'active' : ''" @click="detailTab = 0">商品详情
						</view>
						<view class="tab-item" :class="detailTab == 1 ? 'active color-base-text' : ''" @click="detailTab = 1">售后保障</view>
					</view> -->
                    <view class="detail-head" style="background-image: url(https://xmgts.kanfoshan.cn/public/static/images/detail-bgimg.png)">
                        <view class="head-shop" @click="goHome()">
                            <view class="shop-mes">
                                <view class="shop-img">
                                    <image :src="shopInfo.logo"></image>
                                </view>
                                <view class="shop-name">{{shopInfo.site_name}}</view>
                            </view>
                            <view class="shop-stroll">
                                <view class="stroll-text">进店逛逛</view>
                                <image :src="$util.imgPath('shop-right.png')" mode="widthFix"></image>
                            </view>
                        </view>
                        <view class="detail-line"></view>
                        <!-- <view class="header-tabs">
                            <view class="tabs-item item-margin">
                                <view class="item-name" @click="detailTab = 0">图文详情</view>
                                <view class="item-active" v-if="detailTab == 0"></view>
                            </view>
                            <view class="tabs-item">
                                <view class="item-name" @click="detailTab = 1">售后保障</view>
                                <view class="item-active" v-if="detailTab == 1"></view>
                            </view>
                        </view> -->
                    </view>
                    <view class="detail-content" :class="detailTab == 1 ? 'active' : ''">
                        <view class="detail-content-item" v-show="detailTab == 0">
                            <view class="goods-details" v-if="goodsSkuDetail.goods_content">
                                <u-parse class="richText" :content="goodsSkuDetail.goods_content" @navigate="navigate">
                                </u-parse>
                            </view>
                            <view class="goods-details active" v-else>该商家暂无上传相关详情哦！</view>
                        </view>
                        <view class="detail-content-item" v-show="detailTab == 1">
                            <view class="goods-details" v-if="service">
                                <u-parse class="richText" :content="service" @navigate="navigate"></u-parse>
                            </view>
                            <view class="goods-details active" v-else>该商品暂无相关售后哦！</view>
                        </view>
                    </view>

                    <view v-if="preview == 0">
                        <nsGoodsRecommend ref="goodrecommend"></nsGoodsRecommend>
                    </view>

                    <!-- SKU选择 -->
                    <ns-goods-sku ref="goodsSku" @refresh="refreshGoodsSkuDetail" :goods-detail="goodsSkuDetail" :max-buy="goodsSkuDetail.max_buy" :min-buy="goodsSkuDetail.min_buy"></ns-goods-sku>

                    <!-- 海报 -->
                    <view @touchmove.prevent.stop>
                        <uni-popup ref="posterPopup" type="bottom" class="poster-layer">
                            <template v-if="poster != '-1'">
                                <view :style="{ height: posterHeight > 0 ? posterHeight + 80 + 'px' : '' }">
                                    <view class="image-wrap">
                                        <image :src="$util.img(poster)" :style="{ height: posterHeight > 0 ? posterHeight + 'px' : '' }" />
                                    </view>
                                    <!-- #ifdef MP || APP-PLUS -->
                                    <view class="save" @click="saveGoodsPoster()">保存图片</view>
                                    <!-- #endif -->
                                    <!-- #ifdef H5 -->
                                    <view class="save">长按保存图片</view>
                                    <!-- #endif -->
                                </view>
                                <view class="close iconfont iconclose" @click="closePosterPopup()"></view>
                            </template>
                            <view v-else class="msg">{{ posterMsg }}</view>
                        </uni-popup>
                    </view>

                    <!-- 分享弹窗 -->
                    <view @touchmove.prevent.stop>
                        <uni-popup ref="sharePopup" type="bottom" class="share-popup">
                            <view>
                                <view class="share-title">分享</view>
                                <view class="share-content">
                                    <!-- #ifdef MP -->
                                    <view class="share-box">
                                        <button class="share-btn" :plain="true" open-type="share">
                                            <view class="iconfont iconiconfenxianggeihaoyou"></view>
                                            <text>分享给好友</text>
                                        </button>
                                    </view>
                                    <!-- #endif -->
                                    <!-- #ifdef MP-WEIXIN -->
                                    <view class="share-box" v-if="goodsCircle">
                                        <button class="share-btn" :plain="true" @click="openBusinessView">
                                            <view class="iconfont iconhaowuquan"></view>
                                            <text>分享到好物圈</text>
                                        </button>
                                    </view>
                                    <!-- #endif -->
                                    <!-- <view class="share-box" @click="openPosterPopup">
                                        <button class="share-btn" :plain="true">
                                            <view class="iconfont iconpengyouquan"></view>
                                            <text>生成分享海报</text>
                                        </button>
                                    </view> -->
                                    <!-- #ifdef H5 -->
                                    <view class="share-box" @click="shareFriend">
                                        <button class="share-btn" :plain="true">
                                            <view class="iconfont iconiconfenxianggeihaoyou"></view>
                                            <text>微信分享</text>
                                        </button>
                                    </view>
                                    <!-- <view class="share-box" @click="copyUrl">
                                        <button class="share-btn" :plain="true">
                                            <view class="iconfont iconfuzhilianjie"></view>
                                            <text>复制链接</text>
                                        </button>
                                    </view> -->
                                    <!-- #endif -->
                                </view>
                                <view class="share-footer" @click="closeSharePopup"><text>取消分享</text></view>
                            </view>
                        </uni-popup>
                    </view>
                </view>
            </view>

            <loading-cover ref="loadingCover"></loading-cover>
            <ns-login ref="login"></ns-login>

            <!-- 商品底部导航 -->
            <ns-goods-action :safeArea="isIphoneX">
                <template v-if="goodsSkuDetail.goods_state == 1 && goodsSkuDetail.verify_state == 1">
                    <ns-goods-action-icon text="店铺" icon="iconshouye11" @click="goHome" />
                    <ns-goods-action-icon text="客服" icon="iconkefu11" @click="goConnect" v-if="kefuConfig.type == 'system' && showKefu==1" />
                    <ns-goods-action-icon text="购物车" icon="icongouwuche21" :corner-mark="cartCount > 0 ? cartCount + '' : ''" @click="goCart" />
                    <block v-if="goodsSkuDetail.stock == 0 && !goodsSkuDetail.sku_spec_format">
                        <ns-goods-action-button class="goods-action-button active3" disabled-text="库存不足" :disabled="true" />
                        <!-- <ns-goods-action-button v-if="goodsSkuDetail.sku_spec_format" class="goods-action-button active3" disabled-text="库存不足" :disabled="true" @click="joinCart" /> -->
                        <!-- <ns-goods-action-button v-else class="goods-action-button active3" disabled-text="库存不足" :disabled="true" /> -->
                    </block>
                    <block v-else-if="goodsSkuDetail.max_buy != 0 && goodsSkuDetail.purchased_num >= goodsSkuDetail.max_buy">
                        <ns-goods-action-button class="goods-action-button active3" disabled-text="已达最大限购数量" :disabled="true" />
                    </block>
                    <block v-else>
                        <ns-goods-action-button class="goods-action-button" :class="goodsSkuDetail.is_virtual == 0 ? 'active1' : ''" text="加入购物车" background="color-join-cart" @click="joinCart" v-if="goodsSkuDetail.is_virtual == 0" />
                        <ns-goods-action-button class="goods-action-button" :class="goodsSkuDetail.is_virtual == 0 ? 'active2' : 'active4'" text="立即购买" @click="buyNow" />
                    </block>
                </template>
                <template v-else>
                    <ns-goods-action-button class="goods-action-button active3" disabled-text="该商品已下架" :disabled="true" />
                </template>
            </ns-goods-action>
            <to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
        </view>
    </page-container>
</template>

<script>
import nsGoodsAction from '@/components/ns-goods-action/ns-goods-action.vue'
import nsGoodsActionIcon from '@/components/ns-goods-action-icon/ns-goods-action-icon.vue'
import nsGoodsActionButton from '@/components/ns-goods-action-button/ns-goods-action-button.vue'
import uniPopup from '@/components/uni-popup/uni-popup.vue'
import nsGoodsSku from '@/components/ns-goods-sku/ns-goods-sku.vue'
import nsGoodsRecommend from '@/components/ns-goods-recommend/ns-goods-recommend.vue'
import uniCountDown from '@/components/uni-count-down/uni-count-down.vue'
import detail from '../public/js/detail.js'
import scroll from '@/common/js/scroll-view.js'
import nsFenxiaoGoodsDetail from '@/components/ns-fenxiao-goods-detail/ns-fenxiao-goods-detail.vue'
import nsGoodsPromotion from '@/components/ns-goods-promotion/ns-goods-promotion.vue'
import globalConfig from '@/common/js/golbalConfig.js'
import toTop from '@/components/toTop/toTop.vue'
import uParse from '@/components/u-parse/u-parse.vue'
import {
	mapGetters,
	mapMutations
} from 'vuex'
export default {
	components: {
		nsGoodsAction,
		nsGoodsActionIcon,
		nsGoodsActionButton,
		uniPopup,
		nsGoodsSku,
		nsGoodsRecommend,
		uniCountDown,
		nsFenxiaoGoodsDetail,
		nsGoodsPromotion,
		toTop,
		uParse
	},
	data() {
		return {
			kefuConfig: {
				weapp: '',
				system: '',
				open: '',
				open_url: ''
			}
		}
	},
	mounted() {
		console.log(this.userInfo, '----------------0-0-00--0-00-0-')
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	mixins: [detail, scroll, globalConfig],
	/**
         * 自定义分享内容
         * @param {Object} res
         */
	onShareAppMessage(res) {
		var path = '/pages/goods/detail/detail?sku_id=' + this.skuId
		if (this.memberId) path += '&suid=' + this.memberId
		return {
			title: this.goodsSkuDetail.sku_name,
			imageUrl: this.$util.img(this.goodsSkuDetail.sku_image, {
				size: 'big'
			}),
			path,
			success: res => { },
			fail: res => { }
		}
	},
	// #ifdef MP-WEIXIN
	// 分享到微信朋友圈
	onShareTimeline() {
		let query = 'sku_id=' + this.skuId
		if (this.memberId) query += '&suid=' + this.memberId
		return {
			title: this.goodsSkuDetail.sku_name,
			query,
			imageUrl: this.$util.img(this.goodsSkuDetail.sku_image, {
				size: 'big'
			})
		}
	}
	// #endif
}
</script>
<style lang="scss">
@import "./../../../common/css/goods_detail.scss";
@import "../public/css/detail.scss";
</style>
<style scoped>
.richText /deep/ image {
    max-width: 100% !important;
}

rich-text image {
    max-width: 100%;
}

/deep/ .reward-popup .uni-popup__wrapper-box {
    background: none !important;
    max-width: unset !important;
    max-height: unset !important;
}

/deep/ .action-icon-wrap .iconfont.iconshouye1 {
    font-size: 40rpx;
}

/deep/ .uni-video-cover {
    background: none;
}

/deep/ .uni-video-cover-duration {
    display: none;
}

/deep/ .uni-video-cover-play-button {
    border-radius: 50%;
    border: 4rpx solid #fff;
    width: 120rpx;
    height: 120rpx;
    background-size: 30%;
}

.poster-layer >>> .uni-popup__wrapper-box {
    max-height: initial !important;
}

/deep/ .sku-layer .uni-popup__wrapper-box {
    overflow-y: initial !important;
}

.goods-promotion .countdown .clockrun >>> .uni-countdown__number {
    min-width: 32rpx;
    height: 32rpx;
    text-align: center;
    line-height: 32rpx;
    border-radius: 4px;
    display: inline-block;
    padding: 4rpx;
    margin: 0;
    border: none;
}

.goods-promotion .countdown .clockrun >>> .uni-countdown__splitor {
    width: 10rpx;
    height: 32rpx;
    line-height: 36rpx;
    text-align: center;
}

.goods-promotion .countdown .clockrun >>> .uni-countdown__splitor.day {
    width: initial;
}

/deep/ .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
    max-height: unset !important;
}

/deep/ .goods-action-button.active1 {
    padding-left: 10px;
}

/deep/ .goods-action-button.active2 {
    padding-right: 10px;
}

/deep/ .goods-action-button.active3 {
    padding: 0 10px;
}

/deep/ .goods-action-button.active4 {
    padding: 0 10px;
}

/deep/ .uni-popup__wrapper.bottom {
    border-radius: 24rpx 24rpx 0 0;
}

/deep/ .goods-action-button.active1 .action-buttom-wrap {
    width: 103px;
    height: 38px;
    line-height: 38px;
    border-radius: 19px;
    margin-right: 10px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
}

/deep/ .goods-action-button.active2 .action-buttom-wrap {
    width: 103px;
    height: 38px;
    line-height: 38px;
    border-radius: 19px;
    margin-right: 14px;
    color: #000000;
    font-size: 12px;
    font-weight: 500;
    background-color: #ffd332;
}

/deep/ .goods-action-button.active3 .action-buttom-wrap {
    height: 36px;
    line-height: 36px;
    border-radius: 36px;
    margin: 20rpx 0;
}

/deep/ .goods-action-button.active4 .action-buttom-wrap {
    height: 36px;
    line-height: 36px;
    border-radius: 36px;
}

[data-theme="theme-pink"] >>> .active1 .action-buttom-wrap text {
    color: #303133;
}

[data-theme="theme-golden"] >>> .active1 .action-buttom-wrap text {
    color: #303133;
}
</style>

<!-- 二期修改样式 -->
<style scoped lang="scss">
.price-company {
    color: #000000;
    font-size: 32rpx;
    font-weight: 800;
    margin-right: 12rpx;
}

.price-integer {
    color: #000000;
    font-size: 60rpx;
    font-weight: bold;
    font-family: DIN-Bold;
	
	.integer_decimal{
		font-size: 28rpx;
		letter-spacing: 2rpx;
	}
}

.price-decimal {
    color: #000000;
    font-size: 28rpx;
    font-weight: bold;
}

.goods-title {
    color: #222222;
    font-size: 32rpx;
    font-weight: bold;
    overflow: hidden;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.goods_label{
	color: #767676;
}

.label_list {
    height: 36rpx;
    padding: 0 16rpx;
    background-color: #ffd332;
    display: inline-block;
    margin-bottom: 36rpx;
    font-size: 22rpx;
    font-weight: 500;
    color: #000000;
    line-height: 36rpx;
    border-radius: 4rpx;
}

.option-tit {
    color: #222222;
    font-size: 28rpx;
    font-weight: bold;
    margin-right: 40rpx;
}

.item-text {
    color: #222222;
    font-size: 28rpx;
    font-weight: 500;
}

.discount-box {
    display: inline-block;
    width: 140rpx;
    margin-right: 20rpx;
    height: 36rpx;
    background-color: #fff2f4;
    padding: 0 10rpx;

    .box-text {
        color: #fd3b5c;
        font-size: 24rpx;
        font-weight: 500;
        line-height: 36rpx;
        text-align: center;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
}

.collect-text {
    color: #fd3b5c;
    font-size: 28rpx;
    font-weight: 500;
    margin-right: 16rpx;
}

.comment-label {
    display: flex;
    justify-content: space-between;
    padding-top: 40rpx;

    .label-right {
        display: flex;

        .right-proportion {
            margin-right: 16rpx;
            font-size: 28rpx;
            font-weight: 500;
            color: #999999;
        }

        image {
            width: 14rpx;
            height: 28rpx;
            margin-top: 10rpx;
        }
    }
}

.more_btn {
    width: 14rpx;
    height: 28rpx;
}

.red-right {
    width: 14rpx;
    height: 28rpx;
}

.comment-scroll {
    white-space: nowrap;
    padding-bottom: 40rpx;
    margin-top: 24rpx;

    .comment-item {
        display: inline-block;
        width: 410rpx;
        padding: 24rpx 20rpx;
        border-radius: 12rpx;
        background-color: #f4f4f4;
        margin-right: 20rpx;

        .item-user {
            display: flex;
            align-items: center;

            .user-head {
                width: 48rpx;
                height: 48rpx;
                border-radius: 50%;
                overflow: hidden;
                margin-right: 13rpx;

                image {
                    width: 48rpx;
                    height: 48rpx;
                }
            }

            .user-name {
                color: #999999;
                font-size: 28rpx;
                font-weight: 500;
            }
        }

        .item-detail {
            width: 370rpx;
            color: #222222;
            font-size: 28rpx;
            font-weight: 500;
            white-space: pre-line;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            line-height: 38rpx;
        }

        .item-imglist {
            display: flex;
            align-items: center;
            margin-top: 20rpx;

            .list-img {
                width: 86rpx;
                height: 80rpx;
                border-radius: 12rpx;
                overflow: hidden;
                margin-right: 16rpx;

                image {
                    width: 86rpx;
                    height: 80rpx;
                }
            }
        }
    }
}

.detail-head {
    width: 100%;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: relative;

    .head-shop {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30rpx 24rpx;
		margin-bottom: 12rpx;

        .shop-mes {
            display: flex;
            align-items: center;

            .shop-img {
                width: 80rpx;
                height: 80rpx;
                overflow: hidden;
                border-radius: 50%;
                margin-right: 22rpx;

                image {
                    width: 80rpx;
                    height: 80rpx;
                }
            }

            .shop-name {
                color: #222222;
                font-size: 32rpx;
                font-weight: bold;
            }
        }

        .shop-stroll {
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #ffd332;
            width: 141rpx;
            height: 48rpx;
            border-radius: 24rpx;

            .stroll-text {
                color: #000000;
                font-size: 24rpx;
                font-weight: 500;
                margin-right: 8rpx;
            }

            image {
                width: 11rpx;
            }
        }
    }

    .detail-line {
        width: 100%;
        height: 16rpx;
        background-color: #f4f4f4;
        position: absolute;
        top: 134rpx;
        left: 0;
    }

    .header-tabs {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 30rpx;
        padding-bottom: 42rpx;

        .tabs-item {
            color: #333333;
            font-size: 28rpx;
            font-weight: 500;
            position: relative;

            .item-active {
                background-color: #ffd332;
                width: 36rpx;
                height: 6rpx;
                border-radius: 3rpx;
                position: absolute;
                left: 38rpx;
                bottom: -16rpx;
            }
        }

        .item-margin {
            margin-right: 40rpx;
        }
    }
}

.business {
    width: 100%;
    height: 114rpx;
    background-color: #ffffff;
    background-image: url("https://xmgts.kanfoshan.cn/public/static/images/detail-bg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;

    .business-position {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        margin-left: 20rpx;

        .business-label {
            color: #000000;
            font-size: 32rpx;
            font-weight: 800;
        }

        .business-price {
            display: flex;
            align-items: flex-end;
            margin-top: 20rpx;

            .prices-integer {
                font-size: 60rpx;
                font-weight: bold;
                color: #000000;
                line-height: 76rpx;
            }

            .prices-decimal {
                font-size: 28rpx;
                font-weight: bold;
                color: #000000;
            }
        }

        .business-original {
            color: #222222;
            font-size: 28rpx;
            font-weight: 500;
            text-decoration: line-through;
            margin-left: 28rpx;
        }
    }
}
</style>
